<template>
  <div class="editor-demo-page">
    <a-typography-title :heading="3">代码编辑器示例</a-typography-title>
    
    <a-divider />
    
    <a-card class="editor-section">
      <template #title>
        Monaco 代码编辑器
      </template>
      <template #extra>
        <a-space>
          <a-button @click="runCode" type="primary">
            <template #icon>
              <icon-play-arrow />
            </template>
            运行代码
          </a-button>
          <a-button @click="saveCode">
            <template #icon>
              <icon-save />
            </template>
            保存代码
          </a-button>
        </a-space>
      </template>
      
      <CodeEditor
        ref="codeEditorRef"
        v-model="code"
        :language="language"
        :theme="theme"
        :height="500"
        @language-change="onLanguageChange"
      />
    </a-card>
    
    <a-divider />
    
    <a-collapse :default-active-key="['1']" class="result-section">
      <a-collapse-item key="1" header="执行结果">
        <div class="code-output" v-if="result">
          <pre>{{ result }}</pre>
        </div>
        <a-empty v-else description="运行代码后查看结果" />
      </a-collapse-item>
    </a-collapse>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CodeEditor from '@/components/CodeEditor.vue'
import { Message } from '@arco-design/web-vue'

// 引用编辑器实例
const codeEditorRef = ref<InstanceType<typeof CodeEditor> | null>(null)

// 示例代码
const code = ref(`function fibonacci(n) {
  if (n <= 1) {
    return n;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// 计算前10个斐波那契数
const result = [];
for (let i = 0; i < 10; i++) {
  result.push(fibonacci(i));
}

console.log("斐波那契数列前10个数:", result);
`)

// 当前语言和主题
const language = ref('javascript')
const theme = ref<'vs' | 'vs-dark' | 'hc-black' | 'hc-light'>('vs-dark')

// 执行结果
const result = ref('')

// 处理语言变化
const onLanguageChange = (newLanguage: string) => {
  language.value = newLanguage
}

// 运行代码
const runCode = () => {
  try {
    // 清空之前的结果
    result.value = ''
    
    // 保存原始的console.log
    const originalConsoleLog = console.log
    
    // 重写console.log以捕获输出
    console.log = (...args) => {
      originalConsoleLog(...args)
      result.value += args.map(arg => 
        typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg)
      ).join(' ') + '\n'
    }
    
    // 执行代码
    if (language.value === 'javascript') {
      // 使用eval执行JavaScript代码
      eval(code.value)
    } else {
      // 其他语言需要服务器支持
      result.value = `当前仅支持运行JavaScript代码，${language.value}需要服务端支持`
    }
    
    // 恢复原始的console.log
    console.log = originalConsoleLog
    
    Message.success('代码执行成功')
  } catch (error) {
    if (error instanceof Error) {
      result.value = `执行错误: ${error.message}`
    } else {
      result.value = '执行错误: 未知错误'
    }
    Message.error('代码执行出错')
  }
}

// 保存代码
const saveCode = () => {
  // 在这里可以实现保存代码到文件或数据库的逻辑
  // 示例中仅展示消息
  Message.success('代码已保存')
}
</script>

<style scoped>
.editor-demo-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.editor-section {
  margin-bottom: 20px;
}

.result-section {
  margin-top: 20px;
}

.code-output {
  background-color: #1e1e1e;
  color: #d4d4d4;
  padding: 16px;
  border-radius: 4px;
  font-family: 'Fira Code', 'Source Code Pro', monospace;
  max-height: 300px;
  overflow: auto;
}

.code-output pre {
  margin: 0;
  white-space: pre-wrap;
}
</style> 